<template>
    <div style="background:#666666;color:#ffffff">
        <ul style="overflow:hidden;width:1200px;margin:0 auto">
            <li v-for="(item,index) in ourMessage" :key="index" :style='"position:relative;width: 20%;float:left;height:360px;background:url("+item.img+")"'>
                <div class="ourMessage" style="">
                    <div style="position:absolute;top:230px;width:100%;text-align:center;font-size:16px;line-height:2em">
                        <p>{{item.title}}</p>
                        <p>{{item.desc}}</p>
                    </div>
                    <div :style="backgroundStyle">
                        <span style="font-size:38px;display:block;margin:20px auto;text-align:center">{{item.number}}<span style="font-size:20px">+</span></span>
                        <span style="position:absolute;top:2px;left:55px;font-size:12px;transform: scale(0.75)display: table-cell;vertical-align:middle;">{{item.eng}}</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'ourMessage',
  data () {
    return {
      backgroundStyle: {
        backgroundImage: 'url(' + require('../../images/officalPic/circle.png') + ')',
        backgroundPosition: 'center center',
        backgroundSize: '100% 100%',
        height: '90px',
        width: '90px',
        position: 'absolute',
        top: '90px',
        left: '75px',
        verticalAlign:'middle',

      }
    }
  },
  props: ['ourMessage']

}
</script>

<style scoped lang="scss">
    .ourMessage{
        height:100%;
        background:rgba(0,0,0,.5);
    }
    .ourMessage:hover{
        height:100%;
        background:rgba(255,76,80,.7);
        cursor: pointer;
    }
</style>
